<template>
    <div>
    
        <el-collapse v-if="stylelist.length>0">
            <el-collapse-item :title="data.showname" :key="data.showname" v-if="even(list,data.id).length>0" v-for="data in stylelist ">
    
                <el-card class="box-card">
                    <div slot="header" class="card-heaer">
                        <span style="line-height: 36px;">{{data.showname}}</span>
                    </div>
                    <el-form :model="item" label-width="130px" ref="item" :inline="true" class="demo-ruleForm" :key="item.BILL_DATA_ID" v-for="(item,index) in even(list,data.id)">
                        <el-form-item label="项目代码" 
                           v-if="data.id!='201705110926265811'"
                        :prop="'BILL_DATA_DETAIL_CODE'" :rules="{
              required: data.id!='201705110926265811', message: '项目代码不能为空', trigger: 'blur'
            }">
                            <el-input v-model="item.BILL_DATA_DETAIL_CODE" :disabled="editer"></el-input>
                        </el-form-item>
                        <el-form-item label="项目名称" :prop="'BILL_DATA_DETAIL_ZNAME'" :rules="{
              required: true, message: '项目名称不能为空', trigger: 'blur'
            }">
                            <el-input v-model="item.BILL_DATA_DETAIL_ZNAME" :disabled="editer"></el-input>
                        </el-form-item>
                        <el-form-item label="项目名称(英文)"
                           v-if="data.id!='201705110926265811'"
                         :prop="'BILL_DATA_DETAIL_ENAME'" :rules="{
              required: data.id!='201705110926265811', message: '英文名称不能为空', trigger: 'blur'
            }">
                            <el-input v-model="item.BILL_DATA_DETAIL_ENAME" :disabled="editer"></el-input>
                        </el-form-item>
    
                        <el-form-item label="项目描述"
                           v-if="data.id!='201705110926265811'"
                            :prop="'BILL_DATA_DETAIL_DETIAL'" :rules="{
              required: data.id!='201705110926265811', message: '项目描述不能为空', trigger: 'blur'
            }">
                            <el-input v-model="item.BILL_DATA_DETAIL_DETIAL" :disabled="editer"></el-input>
                        </el-form-item>
                       
                        <el-form-item label="项目单价"
                          v-if="data.id!='201705110926265811'"
                          :prop="'BILL_DATA_DETAIL_PMONEY'" :rules="{
              required: data.id!='201705110926265811', message: '项目单价不能为空', trigger: 'blur'
            }">
                            <el-input v-model="item.BILL_DATA_DETAIL_PMONEY" :disabled="editer"></el-input>
                        </el-form-item>
                        <el-form-item label="项目数量"
                         v-if="data.id!='201705110926265811'"
                          :prop="'BILL_DATA_DETAIL_COUNT'" :rules="{
              required: data.id!='201705110926265811', message: '项目数量不能为空', trigger: 'blur'
            }">
                            <el-input v-model="item.BILL_DATA_DETAIL_COUNT" :disabled="editer"></el-input>
                        </el-form-item>
                        <el-form-item label="项目费用"
                         v-if="data.id!='201705110926265811'"
                          :prop="'BILL_DATA_DETAIL_CMONEY'" :rules="{
              required: data.id!='201705110926265811', message: '项目费用不能为空', trigger: 'blur'
            }">
                            <el-input v-model="item.BILL_DATA_DETAIL_CMONEY" :disabled="editer"></el-input>
                        </el-form-item>
    
                         <el-cascader v-if="!islipei" :options="options" v-model="item.arry" @change="handleItemChange(item)">
                        </el-cascader> 
                        <el-form-item label="是否属于保险责任" v-if="!islipei">
                            <el-radio-group v-model="item.BILL_DATA_DETAIL_STATE">
                                <el-radio label="正常">是</el-radio>
                                <el-radio label="删除">否</el-radio>
                            </el-radio-group>  
                        </el-form-item>
                          <el-form-item label="是否与疾病相关" v-if="!islipei">
                            <el-radio-group v-model="item.BILL_DATA_DETAIL_RELATION">
                                <el-radio label="是">是</el-radio>
                                <el-radio label="否">否</el-radio>
                            </el-radio-group>  
                        </el-form-item>
                        <!-- <el-button v-if="!islipei" style="float: right; margin-right:50px;" type="danger" @click="delectitem(item)">删除</el-button> -->
    
                    </el-form>
                </el-card>
            </el-collapse-item>
        </el-collapse>
    
    </div>
</template>
<script>
import {
    mapState
} from 'vuex';
// import liepeiup_item from '@/components/liepeiup_item';
import getid from '@/js/getid';
export default {
    props: {
        billdataid: {
            type: Number,
            default: ""
        },
        editer: {
            type: Boolean,
            default: true
        },
        islipei: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dataitemname: [], //下列列表数据
            dataitem: [], //类型数据
            options: [], //下列列表数据源
            namevalue: "", //选择的数据名称
            stylelist: [],
            list: [], //BILL_DATA_DETAIL
            showlist: []
            // bill:[]//最终账单数据

        };
    },

    computed: mapState({
        bill: state => state.bill.bill
    }),
    methods: {
        even: function (numbers, key) {
            return numbers.filter(function (number) {
                 if (number.DUTYITEM_ID == key && number.BILL_DATA_DETAIL_ISSHOW!="删除") {
                    return number;
                }
            })
        },
        handleItemChange(item) {
            var index = this.list.indexOf(item)
            if (index !== -1) {
                this.list[index].DUTYITEM_FID = this.list[index].arry[0];
                this.list[index].DUTYITEM_ID = this.list[index].arry[1];
                var name = this.getvalue(this.list[index].arry);
                //修改类型数组
                for (var i = 0; i < this.stylelist.length; i++) {
                    if (this.stylelist[i].showname == name.showname) {
                        return;
                    }
                    if (i == this.stylelist.length - 1) {
                        this.stylelist.push(name);
                    }
                }
            }
        },
        delectdata(item, id) {
            //删除条，删除list中 id相同数据              
            var index = this.stylelist.indexOf(item)
            if (index !== -1) {
                this.stylelist.splice(index, 1)
            }
            var arry = [];
            for (var i = 0; i < this.list.length; i++) {
                if (this.list[i].DUTYITEM_ID != id) {
                    arry.push(this.list[i])

                }
            }
            this.list = arry;
           
            for (var i = 0; i < this.bill.length; i++) {
                if (this.bill[i].BILL_DATA_ID == this.billdataid) {
                    this.bill[i].BILL_DATA_DETAIL = this.list;

                } else {
                  
                }
            }

        },
        delectitem(item) {
            var index = this.list.indexOf(item)
            if (index !== -1) {
                this.list[index].BILL_DATA_DETAIL_STATE = "删除";
            }
        },
        getvalue(arry) {
            for (var i = 0; i < this.options.length; i++) {
                if (this.options[i].value == arry[0]) {
                  
                    var namevalue = this.options[i].label + "-";
                    for (var k = 0; k < this.options[i].children.length; k++) {
                        if (this.options[i].children[k].value == arry[1]) {
                            namevalue += this.options[i].children[k].label;
                            var obj = {};
                            obj.showname = namevalue;
                            obj.id = arry[1];
                          
                            return obj;
                        }
                    }
                }
            }
        }
    },
    created() {
        for (var i = 0; i < this.bill[this.billdataid].BILL_DATA_DETAIL.length; i++) {
            if (typeof (this.bill[this.billdataid].BILL_DATA_DETAIL[i].arry) != "object") {
            
                this.bill[this.billdataid].BILL_DATA_DETAIL[i].arry = this.bill[this.billdataid].BILL_DATA_DETAIL[i].arry.split(",");
            }
        }
        //获取bill data detail数据
        this.list = this.bill[this.billdataid].BILL_DATA_DETAIL;
        //获取类型数据
        var arry = this.bill[this.billdataid].BILL_DATA_DETAIL;
        var s = new Set();
        var sname = new Set();
        for (var i = 0; i < arry.length; i++) {
            var showname = arry[i].DUTYITEM_NAME1 + "-" + arry[i].DUTYITEM_NAME;
            s.add(arry[i].DUTYITEM_ID); // showlist[]
            sname.add(showname);
        }
        var arry = [];
        var sarry = Array.from(s);
        var snamearry = Array.from(sname);
        for (var i = 0; i < sarry.length; i++) {
            var obj = {};
            obj.showname = snamearry[i];
            obj.id = sarry[i];
            arry.push(obj);
        }

        this.stylelist = arry;
        this.$http.get("DutyItem").then(response => {
            var data = response.body;
            this.options = data;
        }, response => {
            this.$notify.error({
                title: '网络错误',
                message: '网络错误'
            });
            this.loding = false;
        });

    }

}
</script>